<template>
	<div class="tableBox font30">
		<div class="marB40 bold">您好，请选择就餐人数</div>
		<div class="marB40">桌号：{{tableinfo.tableName}}</div>
		<ul class="tableList marB40">
			<li class="tableItem" @click="selectTable(item)" v-bind:class="currentTable == index+1?'on':''"
				v-bind:key="index" v-for="(item,index) in tableList">{{item.name}}</li>
		</ul>
		<div class="startBtn" @click="startOrder">开始点餐</div>
	</div>
</template>

<script>
	//import {getPayArgs} from '@/api/order.js'
	export default {
		name: 'Table',
		props: {
			tableinfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				currentTable: 2,
				tableList: [{
						name: 1
					},
					{
						name: 2
					}, {
						name: 3
					}, {
						name: 4
					}, {
						name: 5
					}, {
						name: 6
					}, {
						name: 7
					}, {
						name: 8
					}, {
						name: 9
					}
				],
				peopleCount: 2,
				tableId: localStorage.getItem('tableId')
			}
		},
		methods: {
			startOrder() {
				this.$store.dispatch("tableInfo", {
					...this.tableinfo,
					num: this.currentTable,
					tableId: this.tableId,
				})
				this.$router.push({
					path: '/index'
				})
			},
			selectTable(item) {
				this.currentTable = item.name
			},
			// pay() {
			// 	var that=this
			// 	getPayArgs().then(function(result){
			// 		debugger
			// 		that.onBridgeReady(result.returnData)
			// 	})
			// },
			// onBridgeReady(params) {
			// 	var that = this
			// 	WeixinJSBridge.invoke(
			// 		'getBrandWCPayRequest', {
			// 			"appId": params.appId, //公众号名称，由商户传入
			// 			"timeStamp": params.timeStamp, //支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
			// 			"nonceStr": params.nonceStr, //支付签名随机串，不长于 32 位
			// 			"package": params.package, //统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
			// 			"signType": 'MD5', //签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
			// 			"paySign": params.paySign, //支付签名
			// 		},
			// 		function(res) {
			// 			if (res.err_msg === "get_brand_wcpay_request:ok") {
			// 				alert('支付成功！');
			// 				that.$router.push({
			// 					path: '/myOrder'
			// 				})
			// 			} else if (res.err_msg === "get_brand_wcpay_request:fail") {
			// 				alert('支付失败！');
			// 			}
			// 		});
			// }
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	.tableBox {
		position: absolute;
		left: 5.3%;
		right: 5.3%;
		bottom: 5.3%;
		padding: 5.3%;
		background-color: #fff;
		border-radius: 0.5rem;

		.tableList {
			display: flex;
			flex-wrap: wrap;

			.tableItem {
				background-color: #ddd;
				margin-right: 2%;
				margin-bottom: 2%;
				width: 18.4%;
				line-height: 1.5rem;
				height: 1.5rem;
				border-radius: 0.3rem;
				text-align: center;

				&.on {
					background-color: $mainColor;
				}

				&:nth-last-of-type(5n) {
					margin-right: 0;
				}
			}
		}

		.startBtn {
			line-height: 2.25rem;
			height: 2.25rem;
			color: #333;
			background-color: $mainColor;
			text-align: center;
			border-radius: 1rem;
		}
	}
</style>
